<template>
    <div>
        <h2>商家列表组件</h2>
        <el-table :data="arrs">
            <el-table-column prop="id" label="id"> </el-table-column>
            <el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column prop="text" label="文本"> </el-table-column>
            <el-table-column label="操作">
                <!-- 编辑删除 -->
                <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 弹窗 -->
        <el-dialog
        title="编辑"
        :visible.sync="dialogFormVisible"
        >
            <el-form :model="form">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="文本" :label-width="formLabelWidth">
                <el-input v-model="form.text" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="fntrue">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import instance from "../../api/index"
export default {
    name:"HomeShop",
    data(){
        return {
            arrs: null,
            form: {
                id: "0",
                name: "姓名",
                text: "文本",
            },
            dialogFormVisible: false,
            formLabelWidth: "120px",
        }
    },
    methods: {
        async getarrs(){
            let {data} = await instance.get("/homeshop")
            console.log('用户列表',data);
            this.arrs = data
        },
        handleEdit(a, b){   //点击编辑按钮
            this.dialogFormVisible = !this.dialogFormVisible;
            this.form.name = b.name;
            this.form.text = b.text;
            this.form.id = b.id;
        },
        // 编辑确定
        fntrue(){
            // 弹框确认按钮
            this.dialogFormVisible = false;
            this.editHomeShop()
        },
        // 编辑业务
        async editHomeShop() {
            let name = this.form.name;
            let text = this.form.text;
            let id = this.form.id;
            //   console.log("编辑业务", name, text);
            let { data } = await instance.put("/homeshop/edit/" + id, {
                name,
                text,
            });
            let { data2 } = await instance.put("/homeuser/edit/" + id, {
                name,
                text,
            });
            //   console.log(data);
            this.getarrs();
        },
        // 删除业务
        async deleteHomeShop(index) {
            let { data } = await instance.delete("/homeshop/" + index);
            let { data2 } = await instance.delete("/homeuser/" + index);
            console.log(data);
            this.getarrs();
        },

        handleDelete(a, b){ //删除按钮
            //用户行为
            console.log("删除", a, b);
            //   this.i = i
            this.$confirm("确定删除该条信息吗", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                console.log("删除");
                this.deleteHomeShop(a);
            }).catch(() => {
                console.log("取消");
            });
        },
    },
    created(){
        this.getarrs()
    }
}
</script>
<style scoped>
    
</style>